<template>
  <div class="group-button-demo">
    <!-- <h2>按钮组组件示例</h2> -->

    <section class="demo-block">
      <!-- <h3>按钮组基础用法</h3> -->
      <div class="button-group">
        <volvo-button type="secondary">按钮文本</volvo-button>
        <volvo-button >按钮文本</volvo-button>
      </div>
    </section>

    <section class="demo-block">
      <!-- <h3>带价格的按钮组</h3> -->
      <div class="button-group price-group">
        <div class="price-info">
          <span class="label">实际支付</span>
          <span class="price">¥30400</span>
          <span class="original">(50400 V值)</span>
        </div>
        <volvo-button type="primary">立即结算</volvo-button>
      </div>
    </section>

    <section class="demo-block">
      <!-- <h3>购物车按钮组</h3> -->
      <div class="button-group cart-group">
        <div class="cart-actions">
          <volvo-badge type="number" content="1" color="#0085fa">
            <span class="cart-icon">🛒</span>
          </volvo-badge>
        </div>
        <volvo-button>加入购物车</volvo-button>
        <volvo-button type="primary">立即购买</volvo-button>
      </div>
    </section>

    <section class="demo-block">
      <h3>自定义价格按钮组</h3>
      <div class="button-group custom-price-group">
        <div class="price-box">
          <span class="price">¥289,000 <span class="info-icon">ⓘ</span></span>
          <span class="customize-text">实付定金</span>
        </div>
        <volvo-button type="primary">个性化配置</volvo-button>
      </div>
    </section>
  </div>
</template>

<script setup>
import VolvoButton from '../components/button/index.vue'
import VolvoBadge from '../components/badge/index.vue'
</script>

<style lang="scss" scoped>
.group-button-demo {
  padding: 20px;

  h2 {
    margin-bottom: 24px;
    font-size: 24px;
  }

  .demo-block {
    margin-bottom: 32px;

    h3 {
      margin-bottom: 16px;
      font-size: 18px;
    }
  }

  .button-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 8px;
  }

  .price-group {
    justify-content: space-between;

    .price-info {
      display: flex;
      align-items: baseline;
      gap: 8px;

      .label {
        font-size: 14px;
        color: #666;
      }

      .price {
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }

      .original {
        font-size: 14px;
        color: #999;
      }
    }
  }

  .cart-group {
    .cart-actions {
      display: flex;
      align-items: center;
      margin-right: 8px;

      .cart-icon {
        font-size: 24px;
      }
    }
  }

  .custom-price-group {
    justify-content: space-between;

    .price-box {
      display: flex;
      flex-direction: column;

      .price {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;

        .info-icon {
          font-size: 14px;
          color: #999;
          margin-left: 4px;
        }
      }

      .customize-text {
        font-size: 12px;
        color: #666;
        margin-top: 4px;
      }
    }
  }
}
</style>
